
<script setup lang="ts" type="module">
import {
  ref,
  onMounted,
  watch,
  reactive,
  onUpdated,
  toRefs,
  toRef,
  Ref,
} from "vue";
import { useRouter, RouterView } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getRandomImg, login } from "@/apis/http";
import LoginForm from "./components/loginfrom.vue";
import { Login } from "@/apis/interface";
import type { ElForm } from "element-plus";
import router from "@/router";
import i18n from "@/lang/index";
// import func from "vue-temp/vue-editor-bridge";

type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({});

const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({
  username: "",
  password: "",
  verificationCode: "",
  languagetype: "",
  key: "",
});
const mdCode = ref("");
const img = ref("");
onMounted: {
  getCode();
}
function getCode() {
  let time = new Date();
  mdCode.value = String(time.getTime());
  let data = {
    key: time.getTime(),
  };
  getRandomImg(data).then((res) => {
    img.value = res.data.image;
  });
}

const submitForm = () => {

  var reg=/^[a-zA-Z][a-zA-Z0-9]{7,15}$/
  if (!loginForm.username) return ElMessage.error("请输入用户名");
  else if(loginForm.username&&!reg.test(loginForm.username))  return ElMessage.error("用户名格式不正确！请输入8~16位，字母开头");
  else if (!loginForm.password) return ElMessage.error("请输入登录密码");
  else if(loginForm.password&&!reg.test(loginForm.password))  return ElMessage.error("密码格式不正确！请输入8~16位，字母开头");
  else if (!loginForm.verificationCode) return ElMessage.error("请输入验证码");
  else {
    loginForm.languagetype = i18n.global.locale.value;
    loginForm.key = mdCode.value;
    console.log(loginForm, 99999);
    login(loginForm).then((res: any) => {
      console.log(res);
      if (res.code == 0) {
        // res.data.flag=0//模拟登录页面 1审核拒绝 2审核中 0成功
        ElMessage.success(res.msg_cn);
        localStorage.setItem("userId", JSON.stringify(res.data));

        if (res.data.flag == 1) {
          sessionStorage.setItem("routerIndex", "/auditRejection");
          router.push("/auditRejection");
        } else if (res.data.flag == 2) {
          sessionStorage.setItem("routerIndex", "/pendingReview");
          router.push("/pendingReview");
        } else {
          sessionStorage.setItem("routerIndex", "/commercialAuction");
          router.push("/");
        }
      } else {
        ElMessage.error(res.msg_cn);
      }
      getCode();
    });
  }
};
</script>

<template>
  <div class="logo-text">欢迎登录合作机构端</div>
  <div class="logo-text">后台管理系统</div>
  <el-form
    ref="loginFormRef"
    :model="loginForm"
    :rules="loginRules"
    size="large"
  >
    <el-form-item prop="username">
      <div class="user-insert">账号</div>
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <div class="user-insert">登录密码</div>
      <el-input
        type="password"
        v-model="loginForm.password"
        show-password
        autocomplete="new-password"
      ></el-input>
    </el-form-item>
    <el-form-item prop="code">
      <div class="user-insert">验证码</div>
      <div class="Verification">
        <el-input type="input" v-model="loginForm.verificationCode"></el-input>
        <img :src="img" @click="getCode" />
      </div>
    </el-form-item>
  </el-form>
  <div class="login-btn">
    <el-button size="large" type="primary" @click="submitForm()"
      >登录</el-button
    >
  </div>
</template>

<style lang="scss" scoped>
@import "../index.scss";
</style>
